<template>
  <div v-loading="loading">
    <div class="search-div">
      <div class="input-div">
        <el-input v-model="searchStr" placeholder="请输入内容" clearable>
          <!-- <i slot="prefix" class="el-input__icon el-icon-search" /> -->
          <el-button slot="append" icon="el-icon-search" @click="searchOrder" />
        </el-input>
      </div>
    </div>
    <div class="cart-list">
      <el-tabs
        v-model="activeOrderName"
        tab-position="left"
        :stretch="true"
        @tab-click="switchTab"
      >
        <el-tab-pane label="全部订单" name="1">
          <show-order-list />
        </el-tab-pane>
        <el-tab-pane label="未支付" name="2">
          <show-order-list />
        </el-tab-pane>
        <el-tab-pane label="待收货" name="3">
          <show-order-list />
        </el-tab-pane>
        <el-tab-pane label="已完成" name="4">
          <show-order-list />
        </el-tab-pane>
        <el-tab-pane label="已取消" name="5">
          <show-order-list />
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script>
import showOrderList from '@/components/Order/showOrderList'
export default {
  components: {
    showOrderList
  },
  data() {
    return {
      loading: false,
      activeOrderName: '1',
      searchStr: ''
    }
  },
  computed: {
    userDetail() {
      return this.$store.getters.userDetail
    }

  },
  created() {
    this.getNewOrderList()
  },
  methods: {
    // 获取用户的最新的订单列表
    getNewOrderList() {
      if (this.userDetail) {
        this.$store.dispatch('order/getUserOrderList', this.userDetail.id).then(res => {

        }).catch(() => {
          this.$notify.error({
            title: '错误',
            message: '获取订单信息失败，请稍后重试'
          })
        })
      }
    },
    // 搜索框触发事件
    searchOrder() {
      if (this.searchStr) {
        const str = this.searchStr.toLowerCase()
        let arr = []
        arr = this.$store.getters.userOrderList.filter(element => {
          const lowBookName = element.book.bookName.toLowerCase()
          const lowAuthor = element.book.author.toLowerCase()
          return lowBookName.includes(str) || lowAuthor.includes(str)
        })
        this.$store.commit('order/SET_SHOWORDERLIST', arr)
      } else {
        this.$store.dispatch('order/setShowOrderList', '1')
      }
      this.activeOrderName = '1'
    },
    // 切换tab标签触发事件
    async switchTab(tab, event) {
      await this.$store.dispatch('order/setShowOrderList', this.activeOrderName)
    }
  }

}
</script>
<style lang="scss" scoped>
.search-div {
  display: flex;
  justify-content: space-around;
  .input-div {
    width: 250px;
  }
}
.cart-list {
  margin-top: 20px;
  margin-bottom: 40px;
}
</style>
